<!-- yangbuyi Copyright (c) https://yby6.com 2023. -->

<script setup>

const {proxy} = getCurrentInstance();

// 表单
let dataForm = ref({
  prompt: "",
  negativePrompt: "",
  styles: "",
  resolution: "768:768",
  url: ""
})


// 分辨率集合
let resolutionList = [
  {label: "768:768（1:1）", value: "768:768"},
  {label: "768:1024（3:4）", value: "768:1024"},
  {label: "1024:768（4:3）", value: "1024:768"},
  {label: "1024:1024（1:1）", value: "1024:1024"},
  {label: "720:1280（9:16）", value: "720:1280"},
  {label: "1280:720（16:9）", value: "1280:720"},
  {label: "768:1280（3:5）", value: "768:1280"},
  {label: "1280:768（5:3）", value: "1280:768"},
  {label: "1080:1920（9:16）", value: "1080:1920"},
  {label: "1920:1080（16:9）", value: "1920:1080"}
]


// 风格类型集合
let itemList = ref([])
// 获取风格类型集合
const styleList = () => {

  const imgList = [
    // { category: '不限定风格', subCategory: '不限定风格', code: '000', url: "https://foruda.gitee.com/images/1702228211279649218/77eb500c_5151444.png"},
    {
      category: '游戏动漫类',
      subCategory: '日系动漫',
      code: '201',
      url: "https://foruda.gitee.com/images/1702228211279649218/77eb500c_5151444.png"
    },
    {
      category: '游戏动漫类',
      subCategory: '怪兽风格',
      code: '202',
      url: "https://foruda.gitee.com/images/1702228211279649218/77eb500c_5151444.png"
    },
    {
      category: '游戏动漫类',
      subCategory: '唯美古风',
      code: '203',
      url: "https://foruda.gitee.com/images/1702228211279649218/77eb500c_5151444.png"
    }

  ]

  itemList.value = imgList

  dataForm.value.styles = itemList.value[0].code
}

// 选择风格
const selectStyle = (item) => {
  console.log(item);
  dataForm.value.styles = item.code
}

// ---------------------------------------------------生命周期---------------------------------------------------
// 页面加载完成调用
onBeforeMount(() => {
  styleList()
});
</script>

<template>
  <div class="main">
    <!--  左边开始  -->
    <div class="div-left">
      <!--   内边距 16   -->
      <div class="padding16">
        <!--    小标题    -->
        <div class="line-item">
          <label for="">风格选择</label>
          <div class="item-group">
            <!--      for循环      -->
            <div
                :class="{
                  'item-img': true,
                  'activeItem': dataForm.styles === item.code
                }"

                v-for="item in itemList"
                @click="selectStyle(item)"
                :key="item.code">
              <div style="width: 94px;height: 94px;">
                <!--  图片  -->
                <img :src="item.url" alt="">
                <!--  图片描述 -->
                <div class="item-img-remark">
                  {{ item.subCategory }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--    小标题    -->
        <div class="line-item">
          <label for="">描述词</label>
          <el-input v-model="dataForm.prompt"
                    placeholder="请输入您想要的画面或者使用下面的推荐词"
                    type="textarea" :rows="5"
                    show-word-limit maxlength="250"/>
        </div>
        <!--    小标题    -->
        <div class="line-item">
          <span>反向词</span>
          <el-input v-model="dataForm.negativePrompt"
                    placeholder="请输入画面中不希望出现的元素,例如: 模糊"
                    type="textarea" :rows="5"
                    show-word-limit maxlength="250"/>
        </div>
        <!--    小标题    -->
        <div class="line-item">
          <label for="">图片尺寸</label>
          <el-select style="width: 100%;" v-model="dataForm.resolution" class="m-2"
                     placeholder="请选择希望生成的图片分辨率" size="large">
            <el-option
                v-for="item in resolutionList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </div>


        <div style="margin-top: 5px;margin-bottom: 5px;">
          <el-button type="primary" style="width: 100%;margin-top: 15px;height: 35px">
            生成画作
          </el-button>
        </div>
      </div>


    </div>
    <!--  右边开始  -->
    <div class="div-main">
      <div class="div-main-about">
        <div class="div-main-about__object">
          <i class="div-main-about__icon"></i>
        </div>
        <div class="div-main-about__main">
          <div class="div-main-about__title">在左侧输入描述词开始创作吧</div>
        </div>
      </div>
    </div>
  </div>


</template>

<style scoped lang="scss">

</style>
